<template>
    <div class="login-container">
        <h1>在线考试系统</h1>
        <van-form @submit="handleLogin">
            <div class="wrap-input">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </div>
            <div style="margin: 16px 0;">
                <van-button block color="#56baca" type="info" native-type="submit">登 录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { validUsername } from "utils/validate";
import md5 from "crypto-js/md5";
export default {
    name: "Login",
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!validUsername(value)) {
                callback(new Error("Please enter the correct user name"));
            } else {
                callback();
            }
        };
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error("The password can not be less than 6 digits"));
            } else {
                callback();
            }
        };
        return {
            username: "",
            password: "",
            loading: false,
        };
    },
    computed: {
        // redirect() {
        //     const { query } = this.$route;
        //     return query && query.redirect;
        // },
    },
    methods: {
        showPwd() {
            if (this.passwordType === "password") {
                this.passwordType = "";
            } else {
                this.passwordType = "password";
            }
            this.$nextTick(() => {
                this.$refs.password.focus();
            });
        },
        handleLogin() {
            this.loading = true;
            this.$store
                .dispatch("user/login", {
                    username: this.username,
                    password: md5(this.password).toString(),
                    identityEnum: "STUDENT",
                })
                .then(async () => {
                    await this.$router.push({ path: this.redirect || "/" });
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
    },
};
</script>
<style  lang="scss">
.login-container {
    height: 100%;
    padding: 30px 15px;
    overflow: hidden;

    h1 {
        text-align: center;
        margin-bottom: 50px;
    }
    .van-button {
        margin-top: 30px;
    }
    .van-cell__title {
        font-size: 16px;
    }
    .wrap-input {
        border-radius: 5px;
        overflow: hidden;
    }
}
</style>
